<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
          name="viewport">
    <title>登录</title>
    <link href="css/normalize.css" rel="stylesheet">
    <link href="css/login.css" rel="stylesheet">
    <link href="css/sign-up-login.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="css/inputEffect.css" rel="stylesheet"/>
    <link href="css/tooltips.css" rel="stylesheet"/>
    <link href="css/spop.min.css" rel="stylesheet"/>

    <script src="js/jquery.min.js"></script>
    <script src="js/snow.js"></script>
    <script src="js/jquery.pure.tooltips.js"></script>
    <script src="js/spop.min.js"></script>
    <!--    主js代码路径-->
    <script src="js/Main_signup.js"></script>

    <!--    -->
    <link href="lib/layui/css/layui.css" rel="stylesheet"/>
    <script src="lib/layui/layui.js"></script>
    <script src="dist/sliderVerify/sliderVerify.js"></script>
    <!--    -->
    <style type="text/css">
        html {
            width: 100%;
            height: 100%;
        }

        body {

            background-repeat: no-repeat;

            background-position: center center #2D0F0F;

            background-color: #00BDDC;

            background-image: url(images/snow.jpg);

            background-size: 100% 100%;

        }

        .snow-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 100001;
        }
    </style>
    <script>
        layui.config({
            base: 'dist/sliderVerify/'
        }).use(['sliderVerify', 'jquery', 'form'], function() {
            var sliderVerify = layui.sliderVerify;
            var slider = sliderVerify.render({
                elem: '#slider'
            })

            $("#login_button").on('click', function() {
                if(!slider.isOk()){
                    hd=true;
                    login();
                }else{
                    hd=false;
                    login();
                }
                return false;
            });
        })

    </script>
</head>
<body onload="createCode()">
<!-- 雪花背景 -->
<div class="snow-container"></div>
<!-- 登录控件 -->
<div id="login">
    <input checked class="sign-in hidden" id="tab-1" name="tab" type="radio"/>
    <input class="sign-up hidden" id="tab-2" name="tab" type="radio"/>
    <input class="sign-out hidden" id="tab-3" name="tab" type="radio"/>
    <div class="wrapper">
        <!-- 登录页面 -->
        <div class="login sign-in-htm">
            <form class="container offset1 loginform">
                <!-- 猫头鹰控件 -->
                <div class="login-owl" id="owl-login">
                    <div class="hand"></div>
                    <div class="hand hand-r"></div>
                    <div class="arms">
                        <div class="arm"></div>
                        <div class="arm arm-r"></div>
                    </div>
                </div>
                <div class="pad input-container">
                    <section class="content">
							<span class="input input--hideo">
								<input autocomplete="off" class="input__field input__field--hideo" id="login-username"
                                       maxlength="15"
                                       name="username" placeholder="请输入用户名" tabindex="1" type="text"/>
								<label class="input__label input__label--hideo" for="login-username">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
                        <span class="input input--hideo">
								<input class="input__field input__field--hideo" id="login-password" maxlength="15"
                                       name="password" placeholder="请输入密码" tabindex="2" type="password"/>
								<label class="input__label input__label--hideo" for="login-password">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
                        <span class="input input--hideo">
                                     <div class="layui-input-block input__field input__field--hideo" id="slider"></div>
							</span>

                    </section>
                </div>

                <div class="form-actions">
                    <a class="btn pull-left btn-link text-muted" onClick="goto_forget()" tabindex="4">忘记密码?</a>
                    <a class="btn btn-link text-muted" onClick="goto_register()" tabindex="5">注册</a>
                    <a class="btn btn-primary"   style="color:white;" tabindex="3"  href="/"
                       value="主页"/>主页</a>
                    <input class="btn btn-primary" id="login_button"  style="color:white;" tabindex="3" type="button"
                           value="登录"/>
                </div>
            </form>
        </div>
        <!-- 忘记密码页面 -->
        <div class="login sign-out-htm">
            <form action="#" class="container offset1 loginform" method="post">
                <!-- 猫头鹰控件 -->
                <div class="forget-owl" id="owl-login">
                    <div class="hand"></div>
                    <div class="hand hand-r"></div>
                    <div class="arms">
                        <div class="arm"></div>
                        <div class="arm arm-r"></div>
                    </div>
                </div>
                <div class="pad input-container">
                    <section class="content">
							<span class="input input--hideo">
								<input autocomplete="off" class="input__field input__field--hideo" id="forget-email"
                                       placeholder="请输入邮箱" type="text"/>
								<label class="input__label input__label--hideo" for="forget-email">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>

                        <span class="input input--hideo">
								<input autocomplete="off" class="input__field input__field--hideo" id="forget-code"
                                       placeholder="请输入邮箱验证码" type="text"/>
								<label class="input__label input__label--hideo" for="forget-code">
									<i class="fa fa-fw fa-wifi icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
                        <span class="input input--hideo">
								<input class="input__field input__field--hideo" id="forget-password" placeholder="请重置密码"
                                       type="password"/>
								<label class="input__label input__label--hideo" for="forget-password">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
                    </section>
                </div>
                <div class="form-actions">
                    <a class="btn pull-left btn-link text-muted" onClick="goto_login()">返回登录</a>
                    <input class="btn btn-primary" id="forget-check" onClick="forgetCheck()" style="color:white;"
                           type="button"
                           value="发送验证码"/>
                    <input class="btn btn-primary" onClick="forget()" style="color:white;" type="button"
                           value="重置密码"/>
                </div>
            </form>
        </div>
        <!-- 注册页面 -->
        <div class="login sign-up-htm">
            <form action="#" class="container offset1 loginform" method="post">
                <!-- 猫头鹰控件 -->
                <div class="register-owl" id="owl-login">
                    <div class="hand"></div>
                    <div class="hand hand-r"></div>
                    <div class="arms">
                        <div class="arm"></div>
                        <div class="arm arm-r"></div>
                    </div>
                </div>
                <div class="pad input-container">
                    <section class="content">
							<span class="input input--hideo">
								<input autocomplete="off" class="input__field input__field--hideo"
                                       id="register-username"
                                       maxlength="15" placeholder="请输入用户名" type="text"/>
								<label class="input__label input__label--hideo" for="register-username">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
                        <span class="input input--hideo">
								<input autocomplete="off" class="input__field input__field--hideo" id="email"
                                       name="email"
                                       placeholder="请输入邮箱" type="text"/>
								<label class="input__label input__label--hideo" for="email">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
                        <span class="input input--hideo">
								<input class="input__field input__field--hideo" id="register-password" maxlength="15"
                                       placeholder="请输入密码" type="password"/>
								<label class="input__label input__label--hideo" for="register-password">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
                        <span class="input input--hideo">
								<input class="input__field input__field--hideo" id="register-repassword" maxlength="15"
                                       placeholder="请确认密码" type="password"/>
								<label class="input__label input__label--hideo" for="register-repassword">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
                        <span class="input input--hideo">
								<input autocomplete="off" class="input__field input__field--hideo" id="register-code"
                                       placeholder="请输入邮箱验证码" type="text"/>
								<label class="input__label input__label--hideo" for="register-code">
									<i class="fa fa-fw fa-wifi icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
                    </section>
                </div>
                <div class="form-actions">
                    <a class="btn pull-left btn-link text-muted" onClick="goto_login()">返回登录</a>
                    <input class="btn btn-primary" id="register-check" onClick="check()" style="color:white;"
                           type="button"
                           value="发送验证码"/>
                    <input class="btn btn-primary" onClick="register()" style="color:white;" type="button"
                           value="注册"/>
                </div>
            </form>
        </div>
    </div>
</div>
<div style="text-align:center;">
</div>
</body>
</html>